<template>
  <a-modal
    :title="isEdit ? '修改外设类型' : '新增外设类型'"
    :visible="show"
    @cancel="handleCancel"
    width="30%"
    class="procedure-modal"
  >
    <a-form-model
      ref="ruleForm"
      :model="item"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :rules="rules"
    >
      <a-form-model-item label="外设类型名称" prop="PrinterTypeName">
        <a-input v-model="item.PrinterTypeName" />
      </a-form-model-item>
      <a-form-model-item label="条码前缀" prop="BarCodePrefix">
        <a-input v-model="item.BarCodePrefix" />
      </a-form-model-item>
      <a-form-model-item label="外设类型描述">
        <a-input v-model="item.PrinterTypeDesc" type="textarea" />
      </a-form-model-item>
    </a-form-model>
    <template slot="footer">
      <a-button :loading="loading" @click="handleCancel"> 返回 </a-button>
      <a-button type="primary" :loading="loading" @click="handleOk">
        提交
      </a-button>
    </template>
  </a-modal>
</template>
<script>
import { InsTabPrinterType, updTabPrinterType } from "@/api/peripherals";
export default {
  props: { show: Boolean, isEdit: Boolean, item: Object },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      loading: false,
      rules: {
        PrinterTypeName: [
          {
            required: true,
            message: "请填写类型名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  computed: {},
  methods: {
    //关闭弹窗
    handleCancel() {
      this.$emit("update:show", false);
      this.$refs.ruleForm.resetFields();
    },
    //确认添加/修改
    handleOk() {
      try {
        this.$refs.ruleForm.validate(async (valid) => {
          if (!valid) {
            this.$message.error("请填写必填项");
            return;
          }

          this.loading = true;

          // 根据是否是编辑状态选择对应的操作函数
          const operation = this.isEdit ? updTabPrinterType : InsTabPrinterType;
          const successMessage = this.isEdit ? "修改成功" : "新增成功";

          // 执行操作
          let res = await operation(this.item);
          if (res && res.Status === 10000) {
            // 操作成功后的通用逻辑
            this.$message.success(successMessage);
            this.handleCancel();
            this.$emit("updata");
          } else {
            const errorMessage =
              res && res.Message ? res.Message : "操作失败，请重试";
            this.$message.error(errorMessage);
          }
        });
      } catch (e) {
        // 错误处理
        const errorMessage = e.message || "操作失败，请重试";
        this.$message.error(errorMessage);
      } finally {
        // 确保 loading 状态被重置
        this.loading = false;
      }
    },
    /**  */
  },
};
</script>
<style scoped></style>
